import { ViewStyle, StyleSheet, TextStyle, ImageStyle } from 'react-native'
import { translateSize, themeColors, definedColors } from 'styles'

interface InputIdentityStyle {
	container: ViewStyle
	typeContainer: ViewStyle
	typeContent: TextStyle
	typeIcon: ImageStyle
	btn: ViewStyle
	btnContent: TextStyle
}

const inputIdentityStyle = StyleSheet.create<InputIdentityStyle>({
	container: {
		paddingTop: translateSize(20),
		paddingHorizontal: translateSize(32),
	},
	typeContainer: {
		width: '100%',
		alignItems: 'center',
		justifyContent: 'space-between',
		marginTop: translateSize(80),
		borderRadius: translateSize(8),
		height: translateSize(74),
		borderWidth: 1,
		borderColor: themeColors.divider,
		backgroundColor: '#e5e5e5',
	},
	typeContent: {
		fontSize: translateSize(32),
		color: themeColors.title,
		paddingLeft: translateSize(32),
		paddingVertical: translateSize(20)
	},
	typeIcon: {
		paddingHorizontal: translateSize(32),
	},
	btn: {
		marginTop: translateSize(150),
	},
	btnContent: {
		color: definedColors.white,
		fontSize: translateSize(32),
	},
})

interface IdentityDetailStyle {
	container: ViewStyle
	baseInfoContainer: ViewStyle
	avatar: ImageStyle
	baseContentContainer: ViewStyle
	baseContentTitle: TextStyle
	baseContent: TextStyle
	empty: ViewStyle
	btnContainer: ViewStyle
	btn: ViewStyle
	btnContent: TextStyle
}

const identityDetailStyle = StyleSheet.create<IdentityDetailStyle>({
	container: {
		height: '100%',
	},
	baseInfoContainer: {
		flexDirection: 'row',
		paddingLeft: translateSize(100),
		paddingVertical: translateSize(50),
		height: translateSize(270),
	},
	avatar: {
		height: '100%',
		width: translateSize(120),
	},
	baseContentContainer: {
		height: '100%',
		flexDirection: 'column',
		justifyContent: 'space-between',
		marginLeft: translateSize(50),
	},
	baseContentTitle: {
		flexDirection: 'row',
		fontSize: translateSize(28),
		color: definedColors.gray92,
		paddingRight: translateSize(40),
	},
	baseContent: {
		fontSize: translateSize(28),
		color: themeColors.title,
	},
	empty: {
		height: translateSize(32),
		backgroundColor: themeColors.pageBg,
	},
	btnContainer: {
		flexDirection: 'row',
		marginTop: translateSize(80),
		paddingHorizontal: translateSize(32),
		justifyContent: 'space-between',
	},
	btn: {
		width: '40%',
	},
	btnContent: {
		fontSize: translateSize(32),
		color: definedColors.white,
	},
})

interface IDCardIdentityStyle {
	container: ViewStyle
	hintContainer: ViewStyle
	hintIcon: ImageStyle
	hintTitle: TextStyle
	hintContent: TextStyle
	btnTiltle: TextStyle
	btnContainer: ViewStyle
	btnContent: TextStyle
	btn: TextStyle
	cardImage: ImageStyle
	hintFont: TextStyle
}

const idCardIdentityStyle = StyleSheet.create<IDCardIdentityStyle>({
	container: {
		height: '100%',
		backgroundColor: definedColors.navy,
		alignItems: 'center',
		padding: translateSize(47)
	},
	hintContainer: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	hintFont: {
		paddingVertical: translateSize(10),
		fontSize: translateSize(50),
		fontWeight: 'bold',
		color: definedColors.white
	},
	cardImage: {
		marginBottom: translateSize(30),
		marginLeft: translateSize(70),
		marginTop: translateSize(30)
	},
	hintIcon: {
		width: translateSize(48),
		height: translateSize(48)
	},
	hintTitle: {
		textAlign: "center",
		fontSize: translateSize(36),
		color: definedColors.white
	},
	hintContent: {
		textAlign: "center",
		fontSize: translateSize(38),
		color: definedColors.white,
		marginTop: translateSize(40)
	},
	btnTiltle: {
		width: translateSize(200),
		textAlign: 'center'
	},
	btnContainer: {
		textAlign: "center",
		width: "100%",
		alignItems: 'center',
		backgroundColor: definedColors.navy,
		flexDirection: 'row',
		justifyContent: 'center'
	},
	btnContent: {
		textAlign: "center",
		fontSize: translateSize(28),
		color: definedColors.white,
		marginTop: translateSize(40),
		width: 60
	},
	btn: {
		fontSize: translateSize(40),
		color: definedColors.yellow,
		paddingTop: translateSize(35),
		paddingHorizontal: translateSize(12),
		// textDecorationLine: 'underline'
	}
})

export { inputIdentityStyle, identityDetailStyle, idCardIdentityStyle }
